<template>
  <div class="shop">
    <!-- 主面板 -->
    <main class="shop_main">
      <!-- tab切换 -->
      <nav class="main_tab">
        <!-- ul->tab外部容器 -->
        <ul class="tab_box">
          <li :class="{ select_tab: tabIndex === 1 }" @click="tabSelect(1)">
            <router-link to="/home">漫展演出</router-link>
            
          </li>
          <li :class="{ select_tab: tabIndex === 2 }" @click="tabSelect(2)">
            B站周边
          </li>
        </ul>
      </nav>
      <!-- 漫展演出 -->
      <div v-if="tabIndex === 1"></div>
      <!-- B站周边 -->

      <!-- 筛选器 -->
      <div v-else>
        <nav class="main_select">
          <!-- 筛选器容器 -->
          <div class="select_box">
            <div
              class="select_box_item"
              v-for="(select, index) in selectCon"
              :key="index"
              :style="{
                'border-top': index === 0 ? 'none' : '1px solid #d8d8d8',
              }"
            >
              <div class="select_ones">
                <span>{{ select.title }}</span>
              </div>
              <div
                :class="[
                  'select_child',
                  {
                    active_color:
                      select.type === 1 // 多选或单选
                        ? item.selectFlag // 多选 selectFlag 为true选中 反之 false或undefined不选中
                        : item.title === selectTitle, // 单选 标题与缓存标题一致 为true
                  },
                ]"
                v-for="(item, ind) in select.children"
                :key="ind"
                @click="
                  select.type === 1
                    ? selectSet(item, select)
                    : radioSet(item, ind)
                "
              >
                <span>{{ item.title }}</span>
                <span
                  :class="[
                    'top_l',
                    { active_background: sortPic && selectTitle === '价格' },
                  ]"
                  v-if="item.title === '价格'"
                >
                  <span
                    :class="[
                      'bot_l',
                      { active_background: !sortPic && selectTitle === '价格' },
                    ]"
                  ></span>
                </span>
                <!-- 排序箭头 -->
              </div>
            </div>
          </div>
        </nav>
        <!-- 主内容列表区域 -->
        <main class="main_list">
          <!-- 列表盒子 -->
          <div class="list_box">
            <shopPages
              v-for="(item, ind) in shopList"
              :key="ind"
              :index="ind"
              :item="item"
            ></shopPages>
          </div>
          <!-- 分页器 -->
          <div class="sorter">
            <div
              :class="['page_index', { active_color: ind === sortIndex }]"
              v-for="ind in pageInfo.pageTotal"
              :key="ind"
              @click="sorterSelect(ind)"
            >
              <span>{{ ind }}</span>
            </div>
          </div>
        </main>

        <!-- 周边--end -->
      </div>
    </main>
  </div>
</template>

<script>
  import ShopPages from "../../components/ShopPages"// 商品列表组件
  import shopList from "./listCreate.js"; // 商品列表内容
  import { selectSetOption, pageInfoSet } from "./selectData.js";
  export default {
    name:"zhoubian",
    components: {
      ShopPages,
    },
    data() {
      return {
        tabIndex: 2, // tab 索引值
        /* 筛选器内容 */
        selectCon: [
          {
            title: "分类",
            type: 1, // 多选
            children: [
              { selectType: 1, title: "家居生活" },
              { selectType: 2, title: "挂件徽章" },
              { selectType: 3, title: "周边鞋服" },
              { selectType: 4, title: "电子周边" },
              { selectType: 5, title: "箱包配件" },
              { selectType: 6, title: "文体" },
              { selectType: 7, title: "节日礼品" },
              { selectType: 8, title: "配件" },
              { selectType: 9, title: "模型" },
              { selectType: 10, title: "手表饰品" },
            ],
          },
          {
            title: "筛选",
            type: 2, // 多选
            children: [{ title: "综合" }, { title: "销量" }, { title: "价格" }],
          },
        ],
        shopList: JSON.parse(JSON.stringify(shopList)), // 商品列表 深拷贝
        /* 筛选的选中 */
        selectTitle: "",
        /* 分页索引值 */
        sortIndex: 1,
        /* 多选选中的内容 */
        selectArr: [],
        /* 价格排序正反切换 */
        sortPic: false,
        /* 分页数据 */
        pageInfo: {
          total: 0,
          pageTotal: 0,
          pageSize: 20, // 默认每页20条
          pageNumber: 1, // 第一页
        },
        /* 分页基于此数据进行 */
        pageListStart: [],
      };
    },
    methods: {
      /* 多选事件 */
      selectSet(item, select) {
        this.$set(item, "selectFlag", !item.selectFlag); // 存在深拷贝 使用$set方法
        if (select && select.children) {
          let selectArr = [];
          select.children.forEach((child) => {
            if (child.selectFlag) {
              selectArr.push(child.selectType);
            }
          });
          /* 调用筛选方法返回结果后给shopList赋值 */
          let shopList = selectSetOption(selectArr);
          this.shopList = pageInfoSet(
            shopList,
            this.pageInfo.pageNumber,
            this.pageInfo.pageSize
          );
          this.selectArr = selectArr;
          this.pageListStart = JSON.parse(JSON.stringify(shopList));
          this.$set(this.pageInfo, "total", this.pageListStart.length);
          this.pageInfo.pageTotal = Math.ceil(
            shopList.length / this.pageInfo.pageSize
          ); // 计算总页数
          this.$set(this.pageInfo, "pageNumber", 1);
          this.sortIndex = 1;
        }
      },
      /* 单选事件 */
      radioSet(item) {
        this.selectTitle = item.title;
        let seleType = this.selectTitle === "价格";
        if (seleType) {
          this.sortPic = !this.sortPic;
        } else {
          this.sortPic = false;
        }
        let shopList = selectSetOption(
          this.selectArr,
          this.selectTitle,
          this.sortPic && seleType
        );
        this.shopList = pageInfoSet(
          shopList,
          this.pageInfo.pageNumber,
          this.pageInfo.pageSize
        );
        this.pageListStart = JSON.parse(JSON.stringify(shopList));
        this.$set(this.pageInfo, "total", this.pageListStart.length);
        this.pageInfo.pageTotal = Math.ceil(
          shopList.length / this.pageInfo.pageSize
        ); // 计算总页数
        this.$set(this.pageInfo, "pageNumber", 1);
        this.sortIndex = 1;
      },
      /* tab切换事件 */
      tabSelect(index) {
        this.tabIndex = index;
      },
      /* 分页事件 */
      sorterSelect(index) {
        this.sortIndex = index;
        this.shopList = pageInfoSet(
        this.pageListStart,
                     index,
        this.pageInfo.pageSize
        );
      },
    },
    created() {
      this.pageInfo.total = this.shopList.length; // 数据总数
      this.pageInfo.pageTotal = Math.ceil(
      this.shopList.length / this.pageInfo.pageSize
      ); // 计算总页数
      this.pageListStart = this.shopList;
      this.shopList = pageInfoSet(
      this.pageListStart,
      this.pageInfo.pageNumber,
      this.pageInfo.pageSize
      );
    },
  };
</script>
<style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
</style>
<style lang="scss" scoped>
  .shop {
    color: #222;
    width: 100%;
    /* 主板区域 */
    .shop_main {
      /* tab切换 */
      .main_tab {
        height: 88px;
        padding-top: 16px;
        /* ul->tab外部容器 */
        .tab_box {
          width: 232px;
          border-radius: 10px;
          background: rgba(255, 120, 187, 0.5);
          margin: 0 auto;
          height: 56px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          > li {
            width: calc(50% - 30px);
            height: calc(100% - 20px);
            text-align: center;
            background: #fff;
            border-radius: 4px;
            line-height: 1.8em;
            font-size: 20px;
            padding: 0 3px;
            cursor: pointer;
          }
          .select_tab {
            font-weight: bold;
            box-shadow: 3px 3px 5px rgba($color: #000000, $alpha: 0.5);
          }
        }
      }
      /* 筛选器 */
      .main_select {
        padding-bottom: 14px;
        .select_box {
          width: 1160px;
          background-color: #fff;
          height: 100%;
          margin: 0 auto;
          border: 1px solid #d8d8d8;
          .select_box_item {
            height: 62px;
            display: flex;
            align-items: center;
            font-size: 14px;
            .select_ones {
              width: 90px;
              text-align: center;
              background: #f4f4f4;
              height: 100%;
              line-height: 62px;
            }
            .select_child {
              margin-left: 30px;
              cursor: pointer;
              position: relative;
            }
          }
        }
      }
      /* 商品列表 */
      .main_list {
        min-height: 300px;
        background: rgb(244, 245, 247);
        padding-bottom: 60px;
        .list_box {
          width: 1162px;
          margin: 0 auto;
          min-height: 300px;
          padding-top: 32px;
          display: flex;
          align-content: space-between;
          flex-wrap: wrap;
        }
        /* 分页器 */
        .sorter {
          padding: 0 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 auto;
          .page_index {
            padding: 5px 20px; // 扩大点击范围
            font-size: 12px;
            cursor: pointer;
          }
        }
      }
    }
    .active_color {
      color: #fb7299;
    }

    .top_l,
    .bot_l {
      width: 5px;
      height: 5px;
      display: inline-block;
      background: #999;
      position: absolute;
      right: -10px;
      top: 5px;
      .bot_l {
        right: 0;
        top: 7px;
      }
    }
    .active_background {
      background: #fb7299;
    }
  }
</style>